// 遮罩层
.mask-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.hidden-wrapper {
    display: none;
}

// 弹窗是否置顶
.modal-top-wrapper {
    z-index: 999 !important;
}
.yaklang-update-modal {
    width: 448px;
    z-index: 100;
    position: absolute;
    top: 35%;
    left: calc(50% - 224px);
}

.modal-yaklang-engine-hint {
    box-sizing: border-box;
    width: 100%;
    background: var(--Colors-Use-Neutral-Bg-Hover);
    border: 1px solid var(--Colors-Use-Neutral-Border);
    box-shadow: 0px 6px 20px var(--Colors-Use-Basic-Shadow);
    border-radius: 4px;

    .yaklang-engine-hint-wrapper {
        width: 100%;
        padding: 24px;
        display: flex;
        gap: 16px;
        position: relative;

        .hint-draggle-body {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 24px;
        }

        .hint-left-wrapper {
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .hint-icon {
                width: 32px;
                height: 32px;
            }
            .qs-icon {
                width: 20px;
                height: 20px;
                color: var(--Colors-Use-Neutral-Text-3-Secondary);
                cursor: pointer;
                svg {
                    width: 20px;
                    height: 20px;
                }
            }
            .qs-icon:hover {
                color: var(--Colors-Use-Main-Primary);
            }
        }

        .hint-right-wrapper {
            flex: 1;

            .hint-right-title {
                height: 24px;
                font-weight: 600;
                font-size: 16px;
                line-height: 24px;
                color: var(--Colors-Use-Neutral-Text-1-Title);
            }

            .hint-right-download {
                .download-info-wrapper {
                    margin-top: 16px;
                    display: flex;
                    height: 16px;
                    font-size: 12px;
                    line-height: 16px;
                    color: var(--Colors-Use-Neutral-Disable);

                    .divider-wrapper {
                        margin: 0 8px;
                        width: 1px;
                        height: 16px;
                        display: flex;
                        align-items: center;

                        .divider-style {
                            width: 100%;
                            height: 12px;
                            border: 1px solid var(--Colors-Use-Neutral-Border);
                        }
                    }
                }
                .download-btn {
                    margin-top: 24px;
                    display: flex;
                    justify-content: right;
                    gap: 8px;
                }
            }
        }
    }
}
